Efectos en los enlaces : Gem@ BLOG

Siempre guardo apuntes de interés que más tarde pienso pueden ser de utilidad o prefiero verlos con más calma. Intentando ayudar a k_nelita he buscado la forma de modificar el color o aplicar algunos efectos en los enlaces.
Ya sé que Blogger lo pone fácil con la opción de fuentes y colores pero su blog es de mi arroba.

Para ver estos efectos añadiremos el código entre las etiquetas <body> y </body>

Añadir fondo de color al pasar el ratón por encima:
<style type="text/css">
A:hover { color: white; background:blue }
</style>

Cambiar el tamaño del texto al pasar el ratón por encima:
<style type="text/css">
A:link { font-size: 15px }
A:visited { font-size: 15px }
A:hover { font-size: 18px }
</style>

Cambiar de color al pasar el ratón por encima
<style type="text/css"><br />A:hover { color: red }
</style>

Subrayar el enlace:
<style type="text/css">
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</style>

Eliminar subrayado:
<style type="text/css">
A:link, A:visited { text-decoration: none }
</style>

Cuando cambiamos los colores en la etiqueta body estos aparecen en toda la página igual sin opción a poder cambiarlos. Sin embargo añadiéndolos en la CSS es posible cambiarlos.
Añadiremos entre <head> y </head> lo siguiente:

<style type="text/css">
a:link { color: red; }
a:visited:link { color: green; }
a:hover:link { color: gray; }
a:active:link { color: blue; }
</style>

Naturalmente los colores los podéis sustituir por otros acorde con vuestro blog.

Miranda: Muy bueno, Gema. Es super sencillo, pero da mucho juego.
Gracias por acercanos estos efectos.
Un saludo.; 30.8.07
Gem@: Saludos Miranda ;); 2.9.07
Anónimo: he encontrado este blog | Flores en el Ático | muy bonio x otra parte, en el que cada vez que clicas en un enlace, te quedas en su página, en el navegador permanece la dirección de su blog aunque navegues x otra página... ¿como se hace? no es que sea solidario, pero por saber que no falte...
y felices navidades!!!!; 23.12.07
Gem@: No estoy muy segura S.O.S si me pasas la dirección del blog puedo mirarlo.; 27.12.07
fds: Gracias Gema, todo funciona perfectamente, siempre paso y aplico algo.
Mi blog es www.mitosliterarios.com.ar.

Saludos; 14.10.08
Gem@: Me alegra mucho Editorial. Gracias por hacérmelo saber ;); 15.10.08
Ami~: Cómo lo hago para aplicar distintos efectos a los enlaces en diferentes secciones de la plantilla? :((
Es decir, tú tienes, por ejemplo. Bajo las entradas los enlaces se deslizan hacia la derecha y normalmente cambian de color.
¿Cómo logro eso? porque quiero un efecto para los link de las entradas y otro distinto para la sidebar. No importa qué efectos, sólo necesito como diferenciar las secciones, ya que cuando intento poner a:link en dos partes de la plantilla (en body y en "contenido"), sólo me toma una de las configuraciones de enlaces como general y no se diferencian del resto, quedan todas iguales...

Ojalá puedas ayudarme
Da igual si se usa algún script, lo que sea;)
Gracias!; 1.3.09
Gem@: Hola Ami~Sama, cuando añades estilos en body da como resultado el mismo efecto en todos los enlaces del blog.
Para que los enlaces tenga un efecto distinto hay que añadir una clase que diferencie unos de otros.
Por ejemplo en la sidebar añadimos efecto al Blogroll y en css añadimos unas líneas de código para que surta ese efecto.
Buscamos en la plantilla <div id='sidebar-wrapper'> a partir de ahí tenemos todos los gadgets de la sidebar.
Localizamos el gadget del blogroll que sería algo así:
<b:widget id='HTML10' locked='false' title='BLOGROLL' type='HTML'/>
Si te fijas verás que la id de ese gadgets es HTML10, una sabemos la url nos vamos justo antes de ]]></b:skin> y añadimos unas líneas a la css por ejemplo...
#HTML10 a {
aquí los estilos
del enlace tal
y como lo vemos
}

#HTML10 a:hover{
aquí los estilos
del enlace al pasar
el cursor
}
Siguiendo esas pautas puedes personalizar de distinta forma cualquier enlace de cualquier parte.

En el ejemplo que me decía debajo de las entradas eso son las etiquetas relacionadas y se encuentran en:
<div class='post-footer-line post-footer-line-4'>
En ese caso en lugar de la id lo que nos encontramos es una clase "post-footer-line post-footer-line-4" y los estilos de la css para esa parte serían:
.post-footer-line-4 a {
aquí los estilos
del enlace tal
y como lo vemos
}
.post-footer-line-4 a:hover {
aquí los estilos
del enlace al pasar
el cursor
}

Esta entrada también te puede interesar.; 1.3.09
Ami~: ¡Muchas gracias Gem@!

Ya me ha resultado ;)
Eres un amor :D; 4.3.09
Gem@: Estupendo Ami~Sama :); 4.3.09
Admin: Mirá vos... habías hecho esta entrada mencionandome y yo ni enterada :o o fui tan descortés de no comentar :O

Estoy buscando en todo tu blog, perdona si hice algún desorden :D y no puedo encontrar donde está la parte en que hablamos sobre modificar las fuentes en el footer de los post, que me salen todas en mayúsculas y no me gustan...no solo las mayúsculas también las fuentes en si mismas, quiero algo mas normal, cursiva o como sea, menos frías... menos rígidas.

Y también como corregir los margenes o pading o lo que sea para que los textos no queden pegados a la izquierda del borde (ya te lo había comentado), me refiero siempre al footer de los post, o post.footer...

Besotes gemit@ ya me voy a dormir, jaa vos estarás por levantarte ;); 29.9.09
Gem@: yz Para que te hagas una idea sobre el post footer mira aquí En el anterior comentario te decía que pruebes añadiendo
margin: 25px 0 30px;padding: 20px 10px 5px; ;)
(No puedo levantarme porque aún no me acosté) ;); 30.9.09
Admin: Ja jaa no te habías acostado todavía?? Sos mas trasnochadora que yo ;)
Ya está arreglado esto gemit@, nos estamos cruzando los comentarios :D

Pero este comentario lo escribí en la madrugada de anteayer... porque ayer me acosté temprano... :o no entiendo... ja jaaa
Besos ;); 30.9.09
Gem@: yz K_nelita es que había comentarios en varios sitios, y perdía el hilo del tema :(; 30.9.09
Anónimo: gema e visto en algunos blogs que al momento de pasar el raton por un enlace este como brilla intenso y no se que efecto es mira el blog y los enlaces: http://xhelptibia.blogspot.com/ sabes como puedo tener ese efecto en los enlaces en mi blog?; 29.5.10
Gem@: :: Ese efecto lo produce la propiedad text-shadow.
Para que haga el mismo efecto en tu blog puedes añadirla en body:
a:hover {
text-shadow:0 0 0.5em #000;
color:#0066CC;
text-decoration:underline;
}; 31.5.10